<template>
	<view
		:class="['RX-button-wrap', type, { disable: loading ? 'disable' : disable, 'no-flex': width }]"
		:style="{
			width,
			height,
			fontFamily,
			fontSize: size,
			background: bgColor,
			color: textColor,
			fontWeight: textBold,
			whiteSpace: 'nowrap',
		}"
		@click="handleClick"
	>
		<view class="flex items-center">
			<image v-if="loading" class="loading mr-15rpx" :src="require('@/static/ring/loading.png')" alt="Loading" />
			<slot></slot>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		type: {
			type: String,
			default: "normal",
			// validator: (value) => ["normal", "info", "blackInfo", "plain", "primary", "gray", "transparent", "google"].includes(value),
		},
		size: {
			type: String,
			default: "1rem",
		},
		width: String,
		height: String,
		textColor: String,
		textBold: String,
		bgColor: String,
		disable: Boolean,
		fontFamily: {
			type: String,
			default: "Gotham-Light",
		},
		loading: Boolean,
	},
	methods: {
		handleClick(...args) {
			if (this.loading || this.disable) return;
			this.$emit("click", ...args);
		},
	},
};
</script>

<style lang="scss" scoped>
:root {
	--b-color: none;
	--bg-color: #2d99ff;
	--color: rgba($color: #ffffff, $alpha: 1);
}

.no-flex {
	flex: 0 0 auto;
}

.RX-button-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 80rpx;
	padding: 0 32rpx;
	border-radius: 20rpx;
	font-weight: bold;
	border-color: var(--b-color);
	background: var(--bg-color);
	color: rgba($color: #ffffff, $alpha: 1);
	transition: all 0.3s;

	// normal类型样式
	&.normal {
		background: #2d99ff;
		color: #ffffff;

		&.disable {
			opacity: 0.5;
		}
	}

	// info类型样式
	&.info {
		--bg-color: #808080;

		&.disable {
			opacity: 0.5;
		}
	}

	/* 第三方登录的按钮 */
	&.google {
		--bg-color: #ffffff;
		-b-color: #2d99ff;
		color: #2d99ff;
		border-width: 1px;
		border-style: solid;

		&.disable {
			opacity: 1;
		}
	}

	// blackInfo类型样式
	&.blackInfo {
		--bg-color: #040119;

		&.disable {
			opacity: 1;
		}
	}

	// 朴素按钮
	&.plain {
		border: 1px solid #2d99ff;
		--bg-color: transparent;
		color: #2d99ff;

		&.disable {
			opacity: 1;
		}
	}

	&.plain:active {
		--bg-color: #ffffff;
		border: none;
		color: #2d99ff;
	}

	&.primary {
		border-width: 0;
		--bg-color: #2d99ff;

		&.disable {
			--bg-color: rgba(204, 204, 204, 1);
			opacity: 1;
		}
	}

	&.gray {
		border-width: 0;
		--bg-color: #2a2a2a;

		&.disable {
			--bg-color: #2a2a2a;
			opacity: 1;
		}
	}

	&.transparent {
		border-width: 1px;
		border-color: #fff;
		border-style: solid;

		--bg-color: unset;

		&.disable {
			--bg-color: unset;
			opacity: 1;
		}
	}

	// Additional styles can be added here...
}

.loading {
	width: 40rpx;
	height: 40rpx;
	animation: loading 1s linear 0s infinite;

	@keyframes loading {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(-360deg);
		}
	}
}

.mr-15rpx {
	margin-right: 15rpx;
}

.flex {
	display: flex;
}
.items-center {
	align-items: center;
}
</style>
